<script>
import {defineComponent} from 'vue'
import ComHeader from "@/components/ComHeader.vue";
import ComAside from "@/components/ComAside.vue";
import ComMain from "@/components/ComMain.vue";

export default defineComponent({
  name: "ComLayout",
  components: {ComMain, ComAside, ComHeader}
})
</script>

<template>
<div class="lay">
  <header>
    <com-header></com-header>
  </header>
  <section>
    <aside>
      <com-aside></com-aside>
    </aside>
    <div class="main">
      <com-main></com-main>
    </div>
  </section>
  <footer></footer>
</div>
</template>

<style scoped>
.lay{
  width: 100%;
  height: 100%;
  background: greenyellow;
  display: flex;
  flex-direction: column;
}
.lay>header{
  height: 60px;
  background: salmon;
  border-bottom: 1px solid black;
}
.lay>section{
  flex: 1;
  display: flex;
  background: aquamarine;
  border-bottom: 1px solid black;
}
.lay>section>aside{
  width: 200px;
  border-right: 1px solid black;
}
.lay>section>div.main{
  flex: 1;
}
.lay>footer{
  height: 30px;
  background: magenta;
}
</style>